<template>
    <div class="role-wrapper">
        <el-dialog title="线索详情" :visible.sync="dialogVis" :close-on-click-modal="false" width="600px" center @close="cancelClick">
            <div class="edit-page">
                <div class="edit-wrap marg-B2">
                    <div class="middle">
                        <div class="t-eight fs-12">
                            编号：2385783
                        </div>
                    </div>
                    <div class="middle marg-B1">
                        <div class="t-eight marg-B1 fs-12">
                            发布时间：2024-09-05 22:07:50
                        </div>
                        <div class="t-eight fs-12">
                            抢单时间：2024-09-05 22:07:50
                        </div>
                    </div>
                    <div class="case-list">
                        <div class="items">
                            <div class="flex f-be">
                                <div class="fw-5 t-three fs-14">
                                    当事人：
                                </div>
                                <div class="t-a" @click="nameEdit">
                                    <image class="edit-icon" src="../static/images/edit-icon.png" mode="widthFix"></image>
                                </div>
                            </div>
                            <div class="t-three marg-B2 marg-T1 fs-14">
                                <span>发布地：</span>长春
                            </div>
                            <div class="t-eight marg-B1 flex">
                                <div class="t-three fs-14">
                                    联系电话：
                                </div>
                                <div class="">
                                    <image class="phone-icon" src="../static/images/phone-icon.png" mode="widthFix"></image>
                                    <span class="fs-16 t-two marg-Lhalf">138******</span>
                                </div>
                            </div>
                            <div class="t-three marg-B2 marg-T1 fs-14">
                                <span>线索类型：</span>长春
                            </div>
                            <div class="t-three marg-B1 marg-T1 fs-14">
                                <span>线索描述：</span>
                                <div class="t-three fs-14">
                                    里发了一些影响到他人企业的不良言论，如果对方和解了，需要对方出具谅解书吗
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="edit-wrap">
                    <div class="top marg-L1">
                        跟进人：王五
                    </div>
                    <div class="edit-items first" style="padding: 30rpx 0 0 20rpx;">
                        <div class="bot-bt pad-B2 flex f-mi f-be">
                            <div class="flex f-mi">
                                <span class="t-three">添加标签</span>
                                <button class="g-btn marg-L1">已加微信</button>
                            </div>
                            <div class="flex f-mi" @click="labelClick">
                                <span>请选择</span>
                                <div class="t-as iconfont icon-jiantou2"></div>
                            </div>
                        </div>
                    </div>
                    <div class="edit-items two" style="padding: 30rpx 0 30rpx 20rpx;">
                        <div class="flex f-mi f-be">
                            <div class="t-three">
                                跟进情况
                            </div>
                            <div class="flex f-mi" @click="qkClick">
                                <span>添加</span>
                                <div class="t-as iconfont icon-jiantou2"></div>
                            </div>
                        </div>
                    </div>
                    <uv-steps current="1" direction="column" dot inactiveColor="#CCF1EF" activeColor="#00BAAD">
                        <uv-steps-item title="雍主任更新跟进记录内容“结束跟进”" desc="2024-08-13 12:23:24"></uv-steps-item>
                        <uv-steps-item title="雍主任更新跟进记录内容“打过电话继续跟进”" desc="2024-08-10 10:13:05"></uv-steps-item>
                    </uv-steps>
                </div>
                <div class="fiexd-box">
                    <button class="btn b-bg marg-R1">取消</button>
                    <button class="btn l-bg">保存</button>
                </div>
                <uv-modal ref="modal" title="当事人姓名" @confirm="confirm">
                    <div class="slot-content">
                        <div class="t-eight">
                            <uv-input :customStyle="customStyle" placeholder="请输入当事人姓名">
                            </uv-input>
                        </div>
                    </div>
                    <template v-slot:confirmButton>
                        <div class="modal-btn">
                            <button class="cancle-btn" @click="popClose">取消</button>
                            <button class="confirm-btn" @click="popCom">确定</button>
                        </div>
                    </template>
                </uv-modal>
                <uv-popup ref="popupBox" mode="bottom" @change="change">
                    <div class="pop-wrap">
                        <div class="title flex f-be f-mi marg-B1">
                            <button class="cancle-btn" @click="closeModal">取消</button>
                            <div class="fs-16">
                                添加标签
                            </div>
                            <button class="confirm-btn" @click="confirm">确定</button>
                        </div>
                        <div class="marg-B1">
                            <div class="fs-16 t-three marg-b-half">
                                邀约标签
                            </div>
                            <div class="btn-list flex f-wp">
                                <div class="items" v-for="item in 6">
                                    微信未通过
                                </div>
                            </div>
                        </div>
                        <div class="marg-b-half">
                            <div class="fs-16 t-three marg-B1">
                                分类标签
                            </div>
                            <div class="btn-list flex f-wp">
                                <div class="items" v-for="item in 6">
                                    微信未通过
                                </div>
                            </div>
                        </div>
                        <div class="marg-B1">
                            <div class="fs-16 t-three marg-b-half">
                                呼叫标签
                            </div>
                            <div class="btn-list flex f-wp">
                                <div class="items" v-for="item in 6">
                                    微信未通过
                                </div>
                            </div>
                        </div>
                        <div class="marg-B1">
                            <div class="fs-16 t-three marg-b-half">
                                意向标签
                            </div>
                            <div class="btn-list flex f-wp">
                                <div class="items" v-for="item in 6">
                                    微信未通过
                                </div>
                            </div>
                        </div>
                        <div class="">
                            <div class="fs-16 t-three marg-b-half">
                                交易金额
                            </div>
                            <div class="btn-list flex f-wp">
                                <div class="items" v-for="item in 6">
                                    一万以内
                                </div>
                            </div>
                        </div>
                    </div>
                </uv-popup>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {request} from "../assets/js/utils/request";
export default {
    props: ['isDetail','itemData'],
    data() {
        return {
            dialogVis: false,
        }
    },
    methods: {
        cancelClick() {
            this.dialogVis = false
            this.$emit('detailClose')
        },
        handleCheckedSure() {
            request({
                url: '/user/clue/buy',
                method: 'POST',
                data: {
                    clue_id: this.dataInfo.clue_id,
                    type: this.dataType === 'grab' ? 1 : 2
                }
            }).then(res => {
                if(res.code == 200) {
                    this.$message({
                        message: '保存成功',
                        type: 'success'
                    });
                    this.dialogVis = false
                    this.$emit('detailSave')
                } else{
					this.$message({
					    message: res.message,
					    type: 'error'
					});
				}
            }).catch((error) => {
                console.log(error,'dddddddd')
                // this.$message({
                //     message: '保存成功',
                //     type: 'success'
                // });
            })
        },
    },
    watch: {
        isDetail(newVal, oldVal) {
            this.dialogVis = newVal
            // this.detail = this.dataInfo
        }
    }
}
</script>
<style lang="less" scoped>
    /deep/.el-dialog{
        border-radius: 15px;
    }
    .detail-page{
		.detail-wrap{
			padding: 30rpx;
			border-radius: 8px;
			background: rgba(255, 255, 255, 1);
			.top{
				padding-bottom: 30rpx;
				border-bottom: 2rpx solid #E5E5E5;
			}
			.middle{
				padding: 30rpx 0;
				border-bottom: 2rpx solid #E5E5E5;
			}
			.case-list{
				.items{
					// padding: 32rpx;
					// border: 2rpx solid #E5E5E5;
					// border-radius: 16rpx;
					.bot-t{
						padding-top: 20rpx;
						border-top: 2rpx solid #E5E5E5;
						.right{
							// flex: 1;
							display: flex;
						}
					}
					.phone-icon{
						width: 26rpx;
					}
				}
			}
		}
		.btn-box{
            span-align: right;
			// width: 100%;
			// height: 160rpx;
			// background: rgba(255, 255, 255, 1);
			// box-shadow: 0px -1px 4px  rgba(0, 0, 0, 0.2);
			// display: flex;
			// align-items: center;
			.btn{
				font-size: 14px;
                padding: 0;
				color: #fff;
				width: 96px;
                height: 28px;
				span-align: center;
				line-height: 28px;
                border: none;
				border-radius: 25px;
			}
			.b-bg{
				background: #2967E3;
			}
			.l-bg{
				background: #00BAAD;
			}
            .gray{
                background: #A6A6A6;
            }
		}
	}
    .edit-page{
		padding: 30rpx 30rpx 200rpx 30rpx;
		background: rgba(245, 245, 245, 1);
		.edit-wrap{
			padding: 30rpx;
			border-radius: 8px;
			background: rgba(255, 255, 255, 1);
			.top{
				padding-bottom: 30rpx;
				border-bottom: 2rpx solid #E5E5E5;
			}
			.middle{
				padding: 20rpx 0;
				border-bottom: 2rpx solid #E5E5E5;
			}
			.case-list{
				.items{
					// padding: 32rpx;
					// border: 2rpx solid #E5E5E5;
					// border-radius: 16rpx;
					.bot-t{
						padding-top: 20rpx;
						border-top: 2rpx solid #E5E5E5;
						.right{
							// flex: 1;
							display: flex;
						}
					}
					.phone-icon{
						width: 26rpx;
					}
					.edit-icon{
						width: 34rpx;
					}
				}
			}
			.edit-items{
				position: relative;
			}
			.first::after{
				position: absolute;
				left: 0;
				top: 20px;
				content: "";
				width: 8rpx;
				height: 32rpx;
				background: #383838;
			}
			.two::after{
				position: absolute;
				left: 0;
				top: 17px;
				content: "";
				width: 8rpx;
				height: 32rpx;
				background: #383838;
			}
			.bot-bt{
				border-bottom: 2rpx solid #E5E5E5;
			}
			.g-btn{
				padding: 0;
				font-size: 28rpx;
				color: #383838;
				width: 150rpx;
				height: 48rpx;
				line-height: 48rpx;
				border-radius: 24rpx;
				background: rgba(255, 255, 255, 1);
				border: 1px solid rgba(166, 166, 166, 1);
			}
		}
		.btn-box{
			width: 100%;
			height: 160rpx;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px -1px 4px  rgba(0, 0, 0, 0.2);
			display: flex;
			align-items: center;
			.btn{
				font-size: 32rpx;
				color: #fff;
				width: 42%;
				height: 88rpx;
				text-align: center;
				line-height: 88rpx;
				border-radius: 5px;
			}
			.b-bg{
				background: #2967E3;
			}
			.l-bg{
				background: #00BAAD;
			}
		}
	}
</style>